<!DOCTYPE html>
<html lang="utf-8">
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<title>登录</title>
		<#include "../common/res.html">


        <style>

            .md-2018040402-ll {
                padding: 15px 30px 30px;
                background: #fff;
                border-radius: 7px;
                width: 400px;
                position: relative;
            }

            .md-2018040402-ll .tit {
                font-size: 20px;
                text-align: center;
                padding: 20px 0 30px;
            }

            .md-2018040402-ll .other-loginbox {
                padding: 30px 0 10px;
            }

            .md-2018040402-ll .other-loginbox .c-btns {
                height: 1px;
                font-size: 1px;
                line-height: 1px;
                background: #DDDDDD;
                position: relative;
                margin: 50px 0 22px;
                text-align: center;
            }

            .md-2018040402-ll .other-loginbox .c-btns .c-btn {
                display: inline-block;
                padding: 8px;
                color: #fff;
                font-size: 26px;
                background: #aaa;
                text-align: center;
                border-radius: 50%;
                cursor: pointer;
            }

            .md-2018040402-ll .other-loginbox .c-btns .c-btn:hover {
                background: #2db703;
            }

            .md-2018040402-ll .other-loginbox .c-fbtn {
                display: inline-block;
                background: #fff;
                padding: 0 10px;
                margin-top: -21px;
            }

            .md-2018040402-ll .other-loginbox .c-fbtn.js-log-type-cut {
                font-size: 14px;
                margin-top: 0;
                cursor: pointer;
            }

            .md-2018040801-ll {
                padding: 10px 100px;
                background: #fff;
                border-radius: 7px;
            }

            .md-2018040801-ll .c-md-hd {
                padding: 30px 0;
            }

            .md-2018040801-ll .c-hd-title {
                font-size: 20px
            }

            .md-2018040801-ll .c-hd-title>i {
                font-size: 22px;
            }

            .md-2018040801-ll .c-md-bd .item {
                margin-bottom: 60px;
            }

            .md-2018040801-ll .c-md-bd .item .img-box {
                float: left;
            }

            .md-2018040801-ll .c-md-bd .item .img-box img {
                border-radius: 5px;
            }

            .md-2018040801-ll .c-md-bd .item .text-box {
                float: right;
                width: 750px;
                position: relative;
            }

            .md-2018040801-ll .c-md-bd .item .c-tit {
                font-size: 16px;
                color: #333;
                padding-right: 100px;
                margin-bottom: 15px;
                font-weight: bold;
            }

            .md-2018040801-ll .c-md-bd .item .c-info {
                color: #666;
                font-size: 14px;
                line-height: 1.6;
            }

            .md-2018040801-ll .c-md-bd .item .c-btn {
                position: absolute;
                right: 0;
                top: 0;
                padding: 2px 8px;
                color: #fff;
                background: #4f8dfe;
                border-radius: 3px;
                font-size: 14px;
            }

            /*=========================*/

            .form-ele-box {
                font-size: 14px;
            }

            .form-ele-box .form-item {
                margin-bottom: 18px;
            }

            .form-ele-box .form-label {
                display: inline-block;
                line-height: 1.4;
                margin-bottom: 5px;
                max-width: 100%;
            }

            .form-ele-box .form-checkbox {
                position: relative;
                display: block;
            }

            .form-ele-box.form-inline-box .form-checkbox {
                display: inline-block;
            }

            .form-ele-box.form-inline-box .form-label {
                float: left;
                text-align: right;
                width: 100px;
                margin-right: 15px;
                margin-bottom: 0;
                height: 40px;
                line-height: 38px;
            }

            .form-ele-box .form-inp-area {
                position: relative;
            }

            .form-ele-box .form-inp-area .form-tips {
                font-size: 12px;
                position: absolute;
                right: 2px;
                top: -17px;
                color: #F44336;
                display: none;
            }

            .form-ele-box .form-inp-area.error .form-tips {
                display: inline-block;
            }

            .form-ele-box .form-inp-area.error .form-input {
                border-color: #F44336;
            }

            .form-ele-box .form-input {
                display: block;
                height: 40px;
                line-height: 38px;
                background: #fff;
                border: 1px solid #ccc;
                padding: 0 10px;
                outline: none;
                color: #262e39;
                border-radius: 3px;
                width: 100%;
            }

            .form-ele-box .form-input.form-textarea {
                height: 134px;
                line-height: 24px;
                padding: 10px;
            }

            .form-ele-box.form-inline-box .form-inp-area {
                width: 340px;
                float: left;
            }

            .form-ele-box .form-input[readonly] {
                background-color: #eee;
                opacity: 1;
            }

            .form-ele-box .form-input:focus {
                border: 1px solid #4f8dfe;
            }

            .form-ele-box .form-input.error {
                border: 1px solid #ed2122;
            }

            .form-ele-box .form-inlineblock {
                display: inline-block;
                height: 40px;
                width: 100px;
            }

            .form-ele-box .code-box .code-btn {
                font-size: 12px;
                cursor: pointer;
            }


            .form-btn {
                display: inline-block;
                padding: 6px 12px;
                margin-bottom: 0;
                font-size: 14px;
                font-weight: normal;
                line-height: 1.42857143;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                -ms-touch-action: manipulation;
                touch-action: manipulation;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                background-image: none;
                border: 1px solid transparent;
                border-radius: 4px;
                height: 40px;
            }

            .form-btn:focus,
            .form-btn:active:focus,
            .form-btn.active:focus,
            .form-btn.focus,
            .form-btn:active.focus,
            .form-btn.active.focus {
                outline: thin dotted;
                outline: 5px auto -webkit-focus-ring-color;
                outline-offset: -2px;
            }

            .form-btn:hover,
            .form-btn:focus,
            .form-btn.focus {
                color: #333;
                text-decoration: none;
            }

            .form-btn:active,
            .form-btn.active {
                background-image: none;
                outline: 0;
                -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
                box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
            }

            .form-btn.disabled,
            .form-btn[disabled] {
                cursor: not-allowed;
                filter: alpha(opacity=65);
                -webkit-box-shadow: none;
                box-shadow: none;
                opacity: .65;
            }

            .form-btn-red {
                color: #fff;
                background-color: #fc583d;
                border-color: #fc583d;
            }

            .form-btn-red:focus,
            .form-btn-red.focus {
                color: #fff;
                background-color: #f74528;
                border-color: #f74528;
            }

            .form-btn-red:hover {
                color: #fff;
                background-color: #f74528;
                border-color: #f74528;
            }

            .form-btn-red:active,
            .form-btn-red.active {
                color: #fff;
                background-color: #f74528;
                border-color: #f74528;
            }

            .form-btn-blue {
                color: #fff;
                background-color: #4b95ff;
                border-color: #4b95ff;
            }

            .form-btn-blue:focus,
            .form-btn-blue.focus {
                color: #fff;
                background-color: #2a75fe;
                border-color: #2a75fe;
            }

            .form-btn-blue:hover {
                color: #fff;
                background-color: #2a75fe;
                border-color: #2a75fe;
            }

            .form-btn-blue:active,
            .form-btn-blue.active {
                color: #fff;
                background-color: #2a75fe;
                border-color: #2a75fe;
            }

            .form-btn-default {
                color: #4b95ff;
                background-color: #fff;
                border-color: #4b95ff;
            }

            .form-btn-default:focus,
            .form-btn-default.focus {
                color: #2a75fe;
                border-color: #2a75fe;
            }

            .form-btn-default:hover {
                color: #2a75fe;
                border-color: #2a75fe;
            }

            .form-btn-default:active,
            .form-btn-default.active {
                color: #2a75fe;
                border-color: #2a75fe;
            }

        </style>
	</head>

	<body class="height-100">
		<#include "../common/header.html">
		<div class="f-main" style="padding: 70px 0 30px;">
            <form autocomplete="off" method="post" action="${s.base}/auth/doLogin.html">
                <div class="md-2018040402-ll js-md-180417-login-cj" style="margin: 0 auto;">
                    <div class="js-log-type" data-logtype='0'>
                        <div class="tit">登录</div>
                        <div id="js_login_form" class="form-ele-box">
                            <div class="form-item clearfix">
                                <div class="form-inp-area">
                                    <input id="username" name="username" class="form-input" value="" type="text" cusrule="mail_phone" placeholder="邮箱或手机号" >
                                    <span class="form-tips">邮箱或手机号格式错误</span>
                                </div>
                            </div>
                            <div class="form-item clearfix">
                                <div class="form-inp-area">
                                    <input id="password" name="password" class="form-input" value="" type="password" cusrule="pwd" placeholder="密码" >
                                    <span class="form-tips">包含数字、字母、下划线的6-18位</span>
                                </div>
                            </div>
                            <div id="js_validate_img_area" class="form-item clearfix" style="display: none;">
                                <div class="form-inp-area">
                                    <input id="js_imgcode" class="form-input pull-left" value="" type="text" placeholder="验证码"  style="width: 80px; margin-right: 15px;">
                                    <img id="js_validate_img" class="pull-left code-img js-validate-img" src="" height="40px" width="80px" style="cursor:pointer;margin-right: 15px;">
                                    <div class="form-inlineblock pull-left code-btn js-validate-img">
                                        <span class="verflag" style="cursor: pointer;">看不清楚？换一张</span>
                                        <i class="verflag"></i>
                                    </div>
                                    <span class="form-tips">验证码错误</span>
                                </div>
                            </div>
                            <div class="form-item clearfix">
                                <button id="js_submit_login" class="form-btn form-btn-blue width-100" type="submit">登录</button>
                            </div>
                            <div class="form-item clearfix" style="font-size: 12px;">
                                <div class="form-checkbox pull-left" style="display: none;">
                                    <label><input type="checkbox" checked="checked" /><span>下次自动登录</span></label>
                                </div>
                                <div class="pull-right color-aaa" style="padding-top: 2px;">
                                    <a href="jumpToUserFindPassword" class="color-aaa">忘记密码</a>&nbsp;|&nbsp;<a href="jumpToRegister" class="color-aaa">注册</a>
                                </div>
                            </div>
                            <div class="other-loginbox">
                                <p class="c-tit color-aaa text-center">第三方账号登录</p>
                                <div class="c-btns">
                                    <div class="c-fbtn">
                                        <a class="c-btn js-log-type-cut"><i class="cusfont cusfont-wechat"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 微信 -->
                    <div class="js-log-type" data-logtype='3' style="display: none;">
                        <div id="js_wx_code_log" class="text-center"></div>
                        <div class="other-loginbox">
                            <div class="c-btns">
                                <div class="c-fbtn js-log-type-cut">返回账号登录</div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>



            <div class="types-block clearfix" style="text-align: center;display: none">
				<h3 class="types-title">登录</h3>
				<form class="oc-form" id="infoForm" style="text-align: center;border: 1px solid #CCC;width: 600px;margin:0 auto;padding:20px;" method="post" action="${s.base}/auth/doLogin.html">
						<li><label>用户名</label> 
							<input name="username"  value="" type="text"  class="input-text"  placeholder="请输入用户名" >
						</li>
						<li><label>密码</label> 
							<input id="password" name="password" type="password" class="input-text" placeholder="请输入密码" autocomplete="off" />
						</li>
						<li><label>验证码</label> 
						<input id="identiryCode" name="identiryCode" maxlength="6" class="input-text" type="text" style="width: 150px;" placeholder="请输入验证码"/>
						<a class="vali-base"><img  onclick="reloadIndityImg('indeityImgLogin');" id="indeityImgLogin"  src="${s.base}/tools/identiry/code.html" style="width:80px;height:40px;float:left;margin-left:10px;"/></a>
						</li>
						<li>
							<label style="background-color:#FFF;"></label> 
                           	<input type="checkbox" value="1" id="checkbox1" name="rememberMe" style="float: left;">
                           	<span class="text"  style="float: left;margin-left:2px;">下次自动登录</span>
                      	</li>
						
						<#if errcode ?? && errcode == 1>
						<li style="text-align: left;">
							<label style="background-color:#FFF;"></label>
							<span style="color:red;">请输入正确的验证码</span>
						</li>
						</#if>
						<#if errcode ?? && errcode == 2>
						<li style="text-align: left;">
							<label style="background-color:#FFF;"></label>
							<span style="color:red;">用户名密码错</span>
						</li>
						</#if>
						
						<li class="clearfix" style="margin-top: 20px;">
							<input type="submit" value="登录" class="btn"style="margin-right:20px;">
							<div class="btn" onclick="window.location.href='${s.base}/auth/register.html'">注册</div>
						</li>
					</form>
			</div>
		</div>
		<#include "../common/footer.html">
		<script>
            $(".f-footer").addClass("fixed-footer");
            $(".f-elevator").hide();
		</script>
	</body>
	
</html>
